/* Background */
.bg-hero {
  @apply: bg-[#fef8f7] dark:bg-[#090201];
}

/* Hero */
#hero-search {
  @apply: absolute top-$search-top;
}

#hero-search.fix-hero {
  @apply: fixed top-[0px];
}

.hidden-nav-animes .nav-animes,
.hidden-nav-animes .nav-fansubs,
.hidden-nav-animes .nav-types,
.hidden-nav-fansubs .nav-fansubs,
.hidden-nav-fansubs .nav-types,
.hidden-nav-types .nav-types {
  display: none;
}

#hero-banner {
  @apply: border-bottom [border-bottom:1px_solid_rgb(187_187_187_/_20%)];

  /* background: url(https://pbs.twimg.com/media/GirTmexbYAAk_0F?format=jpg&name=4096x4096);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; */
}

#hero-placeholder.fix-hero {
  @apply: block! fixed top-0 inset-0
  @apply: transform-gpu [-webkit-backdrop-filter:saturate(180%)_blur(20px)] [backdrop-filter:saturate(180%)_blur(20px)] [backface-visibility:hidden] bg-[#fef8f7]/80 dark:bg-[#090201]/80 [border-bottom:1px_solid_rgb(187_187_187_/_20%)];
  @apply: transition-all;
}

/* main layout */
.main {
  @apply: lg:max-w-[calc(100vw-232px)] lg:w-[80vw] md:w-[46rem] lt-md:w-[95vw];
}

.main-with-sidebar {
  @apply: lg:pl-[200px] transition-all;
}

.main-with-sidebar .main {
  @apply: lg:w-[80vw] md:w-[46rem] lt-md:w-[95vw];
}

/* Progress bar */
#animegarden-progress div {
  position: fixed;
  z-index: 10000;
  top: 0;
  width: 20%;
  height: 3px;

  border-radius: 1px;
  background: linear-gradient(90deg, #fb923c, #fdba74);

  animation: loading-loop 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#animegarden-progress div:first-child {
  left: 0%;
}

#animegarden-progress div:last-child {
  left: -20%;
  animation-delay: 0.8s;
}

@keyframes loading-loop {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(500%);
  }
}
